<template>
	<view class="contentmenu">
		<scroll-view scroll-y="true" class="scroll">	
			<van-sidebar v-model="activeKey">
				<van-sidebar-item 
				v-for="item in leftData" 
				:key="item.name" 
				:title="item.name" 
				@tap="showMenu(item.id)"
				/>
			</van-sidebar>
		</scroll-view>

       <menulist :menuData="menuData"></menulist>
	</view>
</template>

<script>
   import menulist from "@/components/Menu.vue";
	export default {
		data() {
			return {
				activeKey:0,
				leftData:[],
				menuData:[]
			}
		},
		onLoad() {
           this.getLeftData();
		},
		methods: {
           getLeftData(){//左侧列表数据
              this.$myRequest({
				  url:"/api/xiaomi/menu"
			  }).then(res=>{
				 //console.log(res);
				  if(+res.code==0){
                      this.leftData=res.data;
					  //左侧请求成功后，才请求右侧
					  //一打开页面，默认请求数组里面的第一条(有品推荐) id 数据
					  this.getMenu(res.data[0].id);
				  }
			  }).catch(err=>{
				  console.log(err);
			  })
		   },
		   getMenu(myid){
			   console.log(myid);
			   this.$myRequest({
				   url:"/api/xiaomi/menuDetail?id="+myid
			   }).then(res=>{
				   this.menuData=res.data;
				   console.log(res);
			   }).catch(err=>{
				   console.log(err);
			   })
		   },
		   showMenu(id){//重新发送ajax
		       console.log(id);
			   this.getMenu(id)
		   }
		},
		components: {
		  menulist
		}
	}
</script>

<style>
    .contentmenu{
		display: flex;
	}
	.scroll{
		height: 100vh;
		width:180rpx;
	}
</style>
